<template>
  <current>
    <div class="common-container center-container">
      <div class="common-header"><h3 class="common-header-title">核查策略</h3></div>
      <div class="general-content p-t-10">
        <el-form
          ref="projectFormRef"
          size="large"
          :model="projectForm"
          :rules="infoRules"
          label-position="top"
        >
          <el-collapse v-model="activeNames">
            <el-collapse-item class="general-settings" :name="ActiveEnum.projectConstraints">
              <template #title>
                <div class="settings-header">
                  <h4>项目约束</h4>
                  <el-button class="collapse-btn">{{
                    toggleText(ActiveEnum.projectConstraints)
                  }}</el-button>
                </div>
              </template>
              <!-- <el-form
              ref="projectFormRef"
              size="large"
              :model="projectForm"
              :rules="infoRules"
              label-position="top"
            > -->
              <el-row>
                <el-col :span="11">
                  <el-form-item label="预期受试者数量" prop="expectNum">
                    <!-- <el-input-number
                      v-model="projectForm.expectNum"
                      :step="1"
                      :min="0"
                      style="width: 100%"
                    /> -->
                    <el-input v-model.num="projectForm.expectNum" />
                  </el-form-item>
                </el-col>
                <el-col :span="2" />
                <el-col :span="11">
                  <el-form-item label="限制" class="label-hidden" prop="expectDisable">
                    <el-checkbox v-model="projectForm.expectDisable" :indeterminate="false"
                      >达到数量时禁止添加新受试者</el-checkbox
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="性别规则限制" prop="genderRule">
                    <select-form
                      v-model="projectForm.genderRule"
                      :options="dictStore.dictData[dictIdMaps.sex]"
                      :multiple="false"
                      :default-props="{ label: 'value', value: 'code' }"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="2" />
                <el-col :span="11">
                  <el-form-item label="接收健康人" class="label-hidden" prop="healthy">
                    <el-checkbox v-model="projectForm.healthy" :indeterminate="false"
                      >接收健康人</el-checkbox
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <div class="flex flex-content-center flex-items-center">
                    <el-form-item label="年龄限制" prop="ageSmall">
                      <!-- <el-input-number
                        v-model="projectForm.ageSmall"
                        :step="1"
                        :min="0"
                        style="width: 100%"
                      /> -->
                      <el-input v-model.num="projectForm.ageSmall" />
                    </el-form-item>
                    <span class="m-lr-5">至</span>
                    <el-form-item class="label-hidden" label="最大年龄" prop="ageBig">
                      <!-- <el-input-number
                        v-model="projectForm.ageBig"
                        :step="1"
                        :min="0"
                        style="width: 100%"
                      /> -->
                      <el-input v-model.num="projectForm.ageBig" />
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
              <!-- </el-form> -->
            </el-collapse-item>

            <el-collapse-item class="general-settings" :name="ActiveEnum.imageExam">
              <template #title>
                <div class="settings-header">
                  <h4>影像核查</h4>
                  <el-button class="collapse-btn">{{ toggleText(ActiveEnum.imageExam) }}</el-button>
                </div>
              </template>
              <!-- <el-form
              ref="issueFormRef"
              size="large"
              :model="projectForm"
              :rules="issueRules"
              label-position="top"
            > -->
              <el-row>
                <el-col :span="11">
                  <el-form-item label="检查模态" prop="dcmModality">
                    <select-form
                      v-model="projectForm.dcmModality"
                      :options="dictStore.dictData[dictIdMaps.modality]"
                      :multiple="true"
                      :default-props="{ label: 'value', value: 'value' }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="检查部位" prop="dcmBodyPart">
                    <select-form
                      v-model="projectForm.dcmBodyPart"
                      :options="bodyPartData"
                      :multiple="false"
                      :default-props="{ label: 'name', value: 'name' }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="关键序列" prop="dcmSeriesKey">
                    <select-form
                      v-model="projectForm.dcmSeriesKey"
                      :options="dicomKeysData"
                      :multiple="false"
                      :default-props="{ label: 'seriesKey', value: 'seriesKey' }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- </el-form> -->
            </el-collapse-item>
          </el-collapse>
        </el-form>

        <div class="btn-wrap">
          <el-button type="primary" :loading="saveInfoLoading" @click="saveInfo">{{
            saveInfoLoading ? '' : '设置'
          }}</el-button>
        </div>
      </div>
    </div>
  </current>
</template>

<script lang="ts" setup>
import { reactive, Ref, ref } from 'vue'
import { useRoute } from 'vue-router'

import { ElMessage } from 'element-plus'

import SelectForm from '@/components/Form/Select.vue'
import Current from '../../current/index.vue'

import DictApi from '@/api/backend/dict'
import ProjectConfigApi from '@/api/project/config'
import { useDict } from '@/api/uses'

import { useDictStore } from '@/store/dict'

import IBaseObj from '#/index'
import type { FormInstance } from 'element-plus'

const { pid } = useRoute().query

const { dictIdMaps } = useDict()
const { getDictData } = useDictStore()
const dictStore = useDictStore()

getDictData()

const bodyPartData: Ref<any[]> = ref([])
const getBodyPartData = async () => {
  bodyPartData.value = (await DictApi.getBodyPart()) || []
}
getBodyPartData()

const dicomKeysData: Ref<any[]> = ref([])
const getDicomKeysData = async () => {
  dicomKeysData.value = (await DictApi.getDicomKeys()) || []
}
getDicomKeysData()

enum ActiveEnum {
  projectConstraints,
  imageExam,
}
const activeNames = ref([ActiveEnum.projectConstraints])

const toggleText = (name: ActiveEnum) => {
  return activeNames.value.includes(name) ? '收起' : '展开'
}

const infoRules = {
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  license: [{ required: true, message: '请输入项目编号', trigger: 'blur' }],
  nameShort: [{ required: true, message: '请输入简要标题', trigger: 'blur' }],
  keyValue: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
  expectStartDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
  expectEndDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
}

const projectForm: IBaseObj = reactive({
  ageSmall: '',
  ageBig: '',
  dcmBodyPart: '',
  dcmModality: '',
  dcmSeriesKey: '',
  expectDisable: '',
  expectNum: '',
  genderRule: '',
  healthy: '',
  configId: '',
})

const projectFormRef = ref<FormInstance>()

const search = async () => {
  const ret = await ProjectConfigApi.getConfig(pid as string)
  console.log('rrr', ret)
  if (ret) {
    Object.keys(projectForm).forEach((key) => {
      projectForm[key] = ret.config[key]
    })

    projectForm.dcmModality = ret.modalityList
  }
}
search()
const saveInfoLoading = ref(false)
const saveInfo = () => {
  projectFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      saveInfoLoading.value = true
      try {
        const ret = await ProjectConfigApi.modifyConfig({
          pid,
          ...projectForm,
          dcmModality: projectForm.dcmModality.join('|'),
        })
        if (ret) {
          ElMessage({
            message: '设置成功！',
            type: 'success',
          })
          search()
        }
      } finally {
        saveInfoLoading.value = false
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.center-container {
  width: 990px;
  padding: 0 16px 20px;
  margin: 0 auto;
}

.common-header {
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
}

.general-content {
  :deep() {
    .el-collapse {
      border: none;
    }
    .el-collapse-item {
      &__header {
        padding-top: 10px;
        background: transparent;

        h4 {
          color: #2e2e2e;
        }
      }

      &__arrow {
        display: none;
      }

      &__wrap,
      &__content {
        background: transparent;
      }

      &__content {
        padding-top: 10px;
      }

      &:last-child {
        .el-collapse-item__wrap {
          border-bottom: none;
        }
      }
    }
  }
}

.settings-header {
  position: relative;
  width: 100%;

  .collapse-btn {
    position: absolute;
    right: 4px;
    top: 4px;
  }

  h4 {
    font-size: 16px;
  }
}

.sub-section {
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;

  h4 {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
  }

  p {
    margin-bottom: 1rem;
  }
}

.w100 {
  :deep() {
    .el-date-editor,
    .el-input__wrapper {
      width: 100%;
    }
  }
}

.tar {
  text-align: right;
}

.c-warning {
  color: var(--el-color-warning);
}

.c-danger {
  color: var(--el-color-danger);
}

.m-lr-5 {
  margin: 12px 5px 0;
}

.btn-wrap {
  margin-top: 20px;
  padding-right: 2px;
  text-align: right;
}
</style>
